<template>
    <div class="app-container">
      <!-- 新增的 title 和 line -->
      <div class="title">总览</div>
      <div class="line"></div>
  
      <!-- 原有的表单和表格内容 -->
      <el-table v-loading="loading" :data="overviewList" @selection-change="handleSelectionChange">
        <el-table-column label="攻击记录ID" align="center" prop="attackId" />
        <el-table-column label="攻击源IP" align="center" prop="ipAddress" />
        <el-table-column label="请求次数" align="center" prop="requestCount" />
        <el-table-column label="检测时间" align="center" prop="detectionTime" />
        <el-table-column label="创建时间" align="center" prop="createdTime" />
        <el-table-column label="更新时间" align="center" prop="updatedTime" />
      </el-table>
    </div>
  </template>
  
  <script>
  import { listOverview } from "@/api/overview/overview"; // 导入 listOverview 方法
  
  export default {
    data() {
      return {
        loading: true, // 初始化 loading 状态
        overviewList: [], // 存储总览数据
      };
    },
    mounted() {
      this.getList(); // 页面创建时调用 getList 方法
    },
    methods: {
      /** 查询总览列表 */
      getList() {
        console.log("请求总览数据...");
        this.loading = true; // 开始加载数据
        listOverview()
          .then(response => {
            console.log("原始数据:", response); // 打印原始数据
  
            // 格式化日期，确保日期显示为本地时间字符串
            this.overviewList = response.map(item => ({
              attackId: item.attackId,
              ipAddress: item.ipAddress,
              requestCount: item.requestCount,
              detectionTime: new Date(item.detectionTime).toLocaleString(), // 格式化为本地时间
              createdTime: new Date(item.createdTime).toLocaleString(),
              updatedTime: new Date(item.updatedTime).toLocaleString(),
            }));
  
            console.log("格式化后的数据:", this.overviewList); // 打印格式化后的数据
  
            this.loading = false; // 数据加载完成后关闭 loading
          })
          .catch(error => {
            console.error("数据请求失败:", error);
            this.loading = false; // 即使请求失败也关闭 loading
          });
      },
    },
  };
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
  }
  
  .title {
    font-weight: bold;
    font-family: SimSun, '宋体', sans-serif;
    font-size: 30px;
    margin-top: 30px;
    margin-left: 45px;
  }
  
  .line {
    margin-top: 20px;
    margin-left: 45px;
    border-top: 1px solid rgb(203, 190, 190);
    width: 96%;
  }
  
  .download-btn-container {
    margin-left: 65px;
    margin-top: 100px;
    z-index: 1000;
  }
  
  .download-btn {
    background-color: #409EFF;
    color: white;
  }
  </style>
  